<template>
  <div class="student-manage">
    <div class="head">全部用户</div>
    <div class="select-button">
      <el-row>
        <el-col :span="9">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input v-model="input" placeholder="请输入用户昵称关键词" @change="pageUsers" ></el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="inputPhone" placeholder="请输入用户手机号码"  @change="pageUsers"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-select v-model="inputRole" placeholder="用户角色">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-button  type="primary" icon="el-icon-search" @click="pageUsers()">查询</el-button>
        </el-col>
        <el-col :span="3">
          <el-button  type="primary" icon="el-icon-search" @click="clear()">清空</el-button>
        </el-col>
        <el-col :span="3">
          <el-button  type="primary" icon="el-icon-search" @click="beginBindCourse()">绑定用户</el-button>
        </el-col>

      </el-row>
    </div>
    <div class="student-list" style="display: flex;flex-direction: column;align-items: center">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"  align="center">
        </el-table-column>
        <el-table-column fixed prop="id" label="ID" min-width="50%" align="center">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" min-width="40%" align="center" >
        </el-table-column>
        <el-table-column prop="tel" label="手机号" min-width="40%" align="center" >
        </el-table-column>
        <el-table-column prop="hulaCoin" label="hula币" min-width="40%" align="center" >
        </el-table-column>
        <el-table-column prop="role" label="角色" min-width="40%" align="center" >
          <template slot-scope="scope">
            <span v-if="scope.row.role=='0'">用户</span>
            <span v-else-if="scope.row.role=='1'">侯浪者</span>
            <span v-else-if="scope.row.role=='2'">浪者</span>
            <span v-else-if="scope.row.role=='3'">主理人</span>
            <span v-else-if="scope.row.role=='4'">封禁</span>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="加入时间" min-width="50%" align="center" >
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="250">
          <template slot-scope="scope">
            <el-button type="text" @click="updateRoleDialogVisible = true,inputUpdateRoleId = scope.row.id">修改角色</el-button>
            <el-button type="text" size="medium" @click="unbindCourse(scope.row.courseId,scope.row.userId)">移除用户</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin-top: 20px;width: 600px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8, 10, 20, 40]"
            :page-size="8"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(total)">
        </el-pagination>
      </div>
    </div>

<!--    绑定用户弹窗表单-->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >

      <el-form label-width="120px">
        <el-form-item label="搜索用户">
          <el-select v-model="bindUserList" multiple filterable remote
                     reserve-keyword placeholder="请输入用户昵称关键词" :remote-method="queryUser" :loading="loading"
                     style="min-width: 450px;">
            <el-option
                v-for="item in queryUserList"
                :key="item.name"
                :label="item.nickname"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定角色">
          <el-select v-model="inputBindRole" placeholder="用户角色">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>




      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="bindCourse">确 定</el-button>
      </span>
    </el-dialog>
<!--    修改角色表单-->
    <el-dialog
        title="提示"
        :visible.sync="updateRoleDialogVisible"
        width="400px"
    >
      <el-select style="width: 100%" v-model="inputUpdateRole" placeholder="用户角色">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserRole">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "StudentManageView",
  data() {
    return {
      total: 0,
      currentSize: 8,

      dialogVisible: false,
      updateRoleDialogVisible : false,

      currentPage: 1,
      input: "",
      inputPhone: "",
      inputRole: '',
      inputUpdateRole: '',
      inputUpdateRoleId : '',
      tableData: [],
      options: [{
        value: 0,
        label: '用户'
      }, {
        value: 1,
        label: '侯浪者'
      },{
        value: 2,
        label: '浪者'
      },{
        value: 3,
        label: '主理人'
      },{
        value: 4,
        label: '封禁'
      }],
      queryUserList : [],
      bindUserList : [],
      inputBindRole : ''
    };
  },
  mounted() {
    this.pageUsers();
  },
  methods: {
    pageUsers() {
      this.$api.courseUserPage({
        pageSize: this.currentSize,
        pageNow: this.currentPage,
        courseId : this.$route.params.id,
        nickName: this.input || '',
        tel: this.inputPhone || '',
        role : this.inputRole
      })
          .then((res) => {
            let list = res.data.rows;
            this.total = res.data.totalPage
            console.log(this.total)
            this.tableData = list
          });
    },
    queryUser(nameKey) {
      this.$api.pageUsers({
        nickName : nameKey,
        pageSize : 100,
        pageNow : 0
      }).then(res => {
        this.queryUserList = res.data.rows
      })
    },
    handleSizeChange(val) {
      this.currentSize = parseInt(val);
      this.pageUsers();
    },
    handleCurrentChange(val) {
      this.currentPage = parseInt(val);
      this.pageUsers();
    },
    updateUserRole(){
      this.$confirm('此操作将改变用户角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$api.updateCourseUserRole({
          role: this.inputUpdateRole,
          id: this.inputUpdateRoleId
        }).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
          this.updateRoleDialogVisible = false
          this.pageUsers()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消更新'
        });
      });
    },
    beginBindCourse(){
      this.dialogVisible = true
    },

    bindCourse() {
      alert(this.bindUserList)
      let userIds = this.bindUserList
      let courseIds = [this.$route.params.id]
      this.$api.BatchBindCourse({
        courseIds : courseIds,
        role: this.inputBindRole,
        userIds: userIds
      }).then(res => {
        console.log(res)
        this.dialogVisible = false
        this.pageUsers()
      })
    },



    unbindCourse(courseId,userId) {
      this.$confirm('此操作将永久移除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$api.unbindCourse({
          userId: userId,
          courseId: courseId
        }).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.pageUsers()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    clear(){
      this.inputPhone = ''
      this.input = ''
      this.inputRole = ''
      this.pageUsers();
    }

  },
};
</script>

<style scoped>
.student-manage{
  margin-top: 20px;
  width: 100%;
}


.head {
  padding-bottom: 10px;
}

.select-button {
  padding: 10px 0;
}

.student-list {
  width: 100%;
  padding: 10px 0;
  display: flex;
}
</style>
